<!DOCTYPE html>
<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>Monocle</title>

		<meta name="description" content="">
		<meta name="author" content="Hakim El Hattab">

		<meta name="viewport" content="width=1000, user-scalable=no" />

		<link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
		<link href="style.css" rel="stylesheet" type="text/css" />

	</head>

	<body>

		<div class="page-wrapper" style="visibility: hidden;">
			<div class="list-wrapper">
				<div class="list">
					<a class="list-item" href="https://lab.hakim.se/flipside">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/flipside.png?2">
						</figure>
						<div class="project-info">
							<h3>Flipside</h3>
							<p>A button that seamlessly transitions from action to confirmation.</p>
						</div>
					</a>
					<a class="list-item" href="https://sketchtoy.com/">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/sketchtoy.png">
						</figure>
						<div class="project-info">
							<h3>Sketch Toy</h3>
							<p>Draw sketches with shaky lines and share replays with friends. Over 65 million sketches saved to date.</p>
						</div>
					</a>
					<a class="list-item" href="https://slides.com">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/slides.png">
						</figure>
						<div class="project-info">
							<h3>Slides</h3>
							<p>A platform for creating, presenting and sharing slide decks.</p>
						</div>
					</a>
					<a class="list-item" href="https://lab.hakim.se/progress-nav">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/progress-nav.png?1">
						</figure>
						<div class="project-info">
							<h3>Progress Nav</h3>
							<p>An animated progress bar that highlights sections of a page that are currently in view.</p>
						</div>
					</a>
					<a class="list-item" href="https://lab.hakim.se/ladda">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/ladda.png">
						</figure>
						<div class="project-info">
							<h3>Ladda</h3>
							<p>UI concept which merges loading indicators into the buttons that invoke them.</p>
						</div>
					</a>
					<a class="list-item" href="https://revealjs.com">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/reveal-js.png">
						</figure>
						<div class="project-info">
							<h3>reveal.js</h3>
							<p>Open source framework for creating HTML presentations.</p>
						</div>
					</a>
					<a class="list-item" href="https://lab.hakim.se/rymd">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/rymd.png?1">
						</figure>
						<div class="project-info">
							<h3>Rymd</h3>
							<p>Move your mouse or swipe to navigate the stars.</p>
						</div>
					</a>
					<a class="list-item" href="https://lab.hakim.se/spiral">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/spiral.png">
						</figure>
						<div class="project-info">
							<h3>Spiral</h3>
							<p>Interactive spiral animation.</p>
						</div>
					</a>
					<a class="list-item" href="https://lab.hakim.se/ticktock">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/ticktock.png?1">
						</figure>
						<div class="project-info">
							<h3>tick-tock</h3>
							<p>Clock pattern animation.</p>
						</div>
					</a>
					<a class="list-item" href="https://lab.hakim.se/checkwave">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/checkwave.png">
						</figure>
						<div class="project-info">
							<h3>Checkwave</h3>
							<p>Check a checkbox to generate a wave of checkboxes. Because   not.</p>
						</div>
					</a>
					<a class="list-item" href="https://lab.hakim.se/flexing-pagination">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/flexing-pagination.png">
						</figure>
						<div class="project-info">
							<h3>Flexing Pagination</h3>
							<p>Pagination arrows that "flex" when you hover or press them.</p>
						</div>
					</a>
					<a class="list-item" href="#">
						<figure class="project-figure">
							<img src="https://d1835mevib0k1p.cloudfront.net/portfolio/v2/images/monocle.png">
						</figure>
						<div class="project-info">
							<h3>Monocle</h3>
							<p>This is inspired by a Flash site I saw years back.</p>
						</div>
					</a>
				</div>
			</div>
		</div>

		<script src="script.js"></script>

		<!-- Third party scripts and sharing UI -->

		<div class="credits">
			<a href="https://github.com/hakimel/css/tree/master/monocle">Source on GitHub</a>
			<a href="https://twitter.com/hakimel">Follow @hakimel</a>
			<a href="https://twitter.com/share?text=Monocle%20List%20by%20@hakimel&url=http://lab.hakim.se/monocle&related=hakimel" target="_blank">Tweet this</a>
		</div>

		<style type="text/css" media="screen">
			.credits {
				position: fixed;
				right: 20px;
				bottom: 25px;
				font-size: 15px;
				color: #fff;
				z-index: 20;
				vertical-align: middle;
			}

			.credits * + * {
				margin-left: 15px;
			}

			.credits a {
				padding: 8px 10px;
				color: #ddd;
				border: 2px solid #666;
				border-radius: 2px;
				text-decoration: none;
			}

			.credits a:hover {
				border-color: #aaa;
				color: #fff;
			}

			@media screen and (max-width: 1000px) {
				.credits {
					width: 100%;
					left: 0;
					right: auto;
					bottom: 0;
					padding: 40px;
					background: #222;
					border-top: 1px solid #333;
					text-align: center;
				}
			}
		</style>

		<script>
			var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
			(function(d, t) {
			var g = d.createElement(t),
			    s = d.getElementsByTagName(t)[0];
			g.async = true;
			g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			s.parentNode.insertBefore(g, s);
			})(document, 'script');
		</script>

	</body>

</html>